Walkthrough

This pull request modifies two Vue chart components to enable minimap reset functionality in the VueUiXy chart library. The changes involve enabling the useResetSlot option in the chart configurations and adding custom minimap reset buttons to the chart templates. Both TrendsChart.vue and VersionDistribution.vue receive identical modifications that inject reset-action slots, wiring them to resetMinimap methods. No public APIs or method signatures were altered; the changes are purely internal configuration and template updates.

Possibly related PRs

• chore: bump vue-data-ui from 3.14.10 to 3.15.0 #1455: Modifies the same chart components and their VueUiXy configurations with minimap-related settings and UI slot adjustments.

Suggested reviewers

• danielroe
• ghostdevv

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

app/components/Package/TrendsChart.vue (1)

1809-1820: Remove inline focus-visible:outline-accent/70 utility class from button.

The project applies focus-visible styling for buttons globally via main.css. Inline focus-visible utilities on button elements should be avoided for consistency and maintainability.

Additionally, this button implementation is identical to the one in VersionDistribution.vue. Consider extracting to a shared component to reduce duplication.

♻️ Proposed fix to remove inline focus-visible class

             <template `#reset-action`="{ reset: resetMinimap }">
               <button
                 type="button"
                 aria-label="reset minimap"
-                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border sm:mb-0"
                 style="pointer-events: all !important"
                 `@click`="resetMinimap"
               >
                 <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
               </button>
             </template>

Based on learnings: "In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via main.css... Therefore, individual buttons or selects in Vue components should not rely on inline focus-visible utility classes like focus-visible:outline-accent/70."

app/components/Package/VersionDistribution.vue (1)

525-536: Remove inline focus-visible:outline-accent/70 utility class from button.

The project applies focus-visible styling for buttons globally via main.css. Inline focus-visible utilities on button elements should be avoided for consistency and maintainability.

♻️ Proposed fix to remove inline focus-visible class

             <template `#reset-action`="{ reset: resetMinimap }">
               <button
                 type="button"
                 aria-label="reset minimap"
-                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border focus-visible:outline-accent/70 sm:mb-0"
+                class="absolute inset-is-1/2 -translate-x-1/2 -bottom-18 sm:inset-is-unset sm:translate-x-0 sm:bottom-auto sm:-inset-ie-20 sm:-top-3 flex items-center justify-center px-2.5 py-1.75 border border-transparent rounded-md text-fg-subtle hover:text-fg transition-colors hover:border-border sm:mb-0"
                 style="pointer-events: all !important"
                 `@click`="resetMinimap"
               >
                 <span class="i-lucide:undo-2 w-5 h-5" aria-hidden="true" />
               </button>
             </template>

Based on learnings: "In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via main.css... Therefore, individual buttons or selects in Vue components should not rely on inline focus-visible utility classes like focus-visible:outline-accent/70."